import { Button } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
import DataList from "../../data/view/list";
import { inject, observer } from "mobx-react";
import {Popover} from 'antd';
import DownloadCondition from '../../data/view/DownloadCondition'
import Condition from "./Condition"
import './index.less';

const getLabel = WeaLocaleProvider.getLabel;

@inject("edcDataDesignerStore")
@observer
export default class EdcData extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            maskDarkB: 0,
            maskDarkH: 0,
        }
        this.calc = false;
    }
    componentWillMount() {
        const { edcDataDesignerStore: store, params } = this.props;
        store.init(params);
        //this.getTabButtonsAd = this.getTabButtonsAd.bind(this);
    }

    componentDidUpdate() {
        const { showSearchAd } = this.props;
        if (showSearchAd && !this.calc) {
            let h = this.getMaskDarkH();
            let b = this.getMaskDarkB();
            this.setState({ maskDarkH: h, maskDarkB: b });
        }
    }
    render() {
        const { edcDataDesignerStore: store } = this.props;
        const { showSearchAd = true, advanceHeight, buttonsAd = this.getTabButtonsAd(), showSearchDrop,
            searchsDrop, dropIcon, buttonsDrop, searchsAd } = store;
        const { maskDarkH, maskDarkB } = this.state;
        return (
            <div className="edc-data-designer">
                <div className="top">
                    <Button.Group>
                        <Button class={'excel-button'} onClick={store.reloadData} disabled={store.excelStore.sessionKey === ''}>{getLabel('502292', '刷新')}</Button>
                    </Button.Group>

                    <Button.Group>
                        {store.rightLevel === 2 && <Button onClick={store.excelStore.deleteData} disabled={store.excelStore.sessionKey === ''}>{getLabel(502286, '删除')}</Button>}
                        {/* <Button onClick={store.batchEdit}>{getLabel('502293','批量编辑') }</Button> */}
                    </Button.Group>
                    <Button.Group>
                        {/*//dataTable改造,隐藏导入导出 
                        <Button onClick={() => { store.doExcelExport() }} disabled={store.excelStore.sessionKey === ''} >{getLabel('17416', '导出')} </Button> */}
                        <Popover overlayClassName='edc-ds-popover'
                    placement="bottomRight"
                    visible={store.downloadPopverVisible}
                    trigger="click"
                    onVisibleChange={store.showContent}
                    content={(
                        <DownloadCondition store={store}></DownloadCondition>
                    )}>


                    <Button onClick={() => { store.showExcelExport() }} className={"`tool-btn` export-btn-setting"}><i className="icon-coms-Flow-setting " /> </Button>

                </Popover>
                    </Button.Group>
                    <Button.Group>
                        <Button onClick={() => { store.excelStore.lockCol() }} disabled={store.excelStore.sessionKey === ''} className={`tool-btn${store.excelStore.colLock == 1 ? ' tool-btn-active' : ''}`}>锁定列 </Button>
                    </Button.Group>
                    <Button.Group>
                        <Button onClick={() => store.excelStore.changeHAlign(0)} className={`tool-btn${store.excelStore.colAlign == 0 ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-left" /></Button>
                        <Button onClick={() => store.excelStore.changeHAlign(1)} className={`tool-btn${store.excelStore.colAlign == 1 ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-center" /></Button>
                        <Button onClick={() => store.excelStore.changeHAlign(2)} className={`tool-btn${store.excelStore.colAlign == 2 ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-right" /></Button>
                    </Button.Group>
                    {/* <Button.Group>
                        <Button onClick={store.exportData}>{getLabel('502294','导出') }</Button>
                        <Button onClick={store.printData}>{getLabel('502295','打印') }</Button>
                    </Button.Group> */}
                    <div className="top-right">

                        {/* {
                            <WeaInputSearch
                                className="left" value={store.quickSearchValue}
                                onSearch={store.onSearch}
                                onSearchChange={store.changeQuickSearchValue.bind(this)} />
                        } */}
                        {store.showAdvance && !showSearchAd && 
                            <Button type='ghost' className='wea-advanced-search'
                                onClick={store.setShowSearchAd.bind(this, true)}
                            >{getLabel('502296', '高级搜索')}</Button>
                        }

                    </div>
                    <div className='wea-search-container' ref="containerWrapper"
                        style={{ display: showSearchAd ? 'block' : 'none' }}
                    >
                        <Button type='ghost' className='wea-advanced-search'
                            onClick={store.setShowSearchAd.bind(this, false)}
                        >{getLabel('502296', '高级搜索')}</Button>
                        <div className='wea-advanced-searchsAd' style={{ height: advanceHeight }}>
                            {<Condition store={store} />}
                        </div>
                        <div className='wea-search-buttons'>
                            <div style={{ textAlign: 'center' }}>
                                {
                                    buttonsAd && buttonsAd.map((data, index) => {
                                        return (
                                            <span key={index} style={{ marginLeft: 15 }}>{data}</span>
                                        );
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <DataList store={store}></DataList>
                {
                    store.hide ?
                        <div className="edc-data-mask" onClick={() => { store.hide && store.changeHide(false) }}>
                        </div>
                        : null
                }

            </div>
        )
    }
    getTabButtonsAd = () => {
        const { edcDataDesignerStore: store } = this.props;
        return [
            (<Button type="primary" onClick={store.search}>{getLabel(388113, '搜索')}</Button>),
            (<Button type="ghost" onClick={store.clearCondition}>{getLabel(2022, '重置')}</Button>),
            (<Button type="ghost" onClick={store.setShowSearchAd.bind(this, false)}>{getLabel(31129, '取消')}</Button>)
        ]
    }


    setShowSearchDrop(bool) {
        if (typeof this.props.setShowSearchDrop === 'function') {
            this.props.setShowSearchDrop(bool);
        }
    }

    getMaskDarkH() {
        let v = 0;
        if (this.refs.containerWrapper) {
            const dom = $(this.refs.containerWrapper);
            v = window.innerHeight - dom.height() - dom.offset().top - 10;
        }
        return v;
    }
    getMaskDarkB() {
        let v = 0;
        if (this.refs.containerWrapper) {
            const dom = $(this.refs.containerWrapper);
            this.calc = true;
            v = - dom.height() - this.getMaskDarkH();
        }
        return v;
    }
}